<template>

  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="handleAddProduct()"
        size="mini">
        添加
      </el-button>
      <el-input
        style="width: 300px"
        placeholder="请输入内容"
        v-model="input"
        clearable
        size="mini">
      </el-input>
        <el-button
          class="btn-add"
          @click="quzzyQuery()"
          size="mini">
          查询
        </el-button>
      <!--<admin-add v-if="dialogSaveVisible" :visible.sync="dialogSaveVisible" :close="closeAdd" ></admin-add>-->
    </el-card>

    <el-table ref="productTable"
              style="width: 100%"
              :data="userList"
              border>
     <!-- <el-table-column type="selection" width="60" align="center"></el-table-column>-->
      <el-table-column label="奇怪的东西" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="userFootAttention(scope.$index, scope.row)">足迹
          </el-button>

          <el-button
            size="mini"
            @click="userCollection(scope.$index, scope.row)">商品收藏
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="用户编号" width="100" prop="userId" align="center">
      </el-table-column>

      <el-table-column label="用户名称" width="100" prop="userName" align="center">
      </el-table-column>
      <el-table-column label="用户头像" width="120" align="center" prop="userPhoto">
        <template slot-scope="scope"><img style="height: 80px" :src="scope.row.userPhoto"></template>
      </el-table-column>
      <el-table-column label="用户手机号" width="100" prop="userPhoneNumber" align="center">
      </el-table-column>
      <el-table-column label="登录密码" width="100" prop="password" align="center">
      </el-table-column>
      <el-table-column label="身份证号" width="100" prop="cardId" align="center">
      </el-table-column>
      <el-table-column label="身份证国徽面" width="120" align="center">
        <template slot-scope="scope"><img style="height: 80px" :src="scope.row.cardFrontImg"></template>
      </el-table-column>
      <el-table-column label="身份证头像面" width="120" align="center">
        <template slot-scope="scope"><img style="height: 80px" :src="scope.row.cardReverse"></template>
      </el-table-column>
      <el-table-column label="性别" width="100" prop="gender" align="center">
      </el-table-column>
      <el-table-column label="生日" width="100" prop="birthday" align="center">
      </el-table-column>
      <el-table-column label="粉钻余额" width="100" prop="pinkDiamond" align="center">
      </el-table-column>
      <el-table-column label="用户状态" width="100" prop="userStatus" align="center">
      </el-table-column>
      <el-table-column label="注册时间" width="100"   prop="registerTime" align="center">
      </el-table-column>
      <el-table-column label="商家账号" width="100" prop="merchantAccount" align="center">
      </el-table-column>
      <el-table-column label="创建人" width="100" prop="createBy" align="center">
      </el-table-column>
      <el-table-column label="创建时间" width="100" prop="createTime" align="center">
      </el-table-column>
      <el-table-column label="更新人" width="100" prop="updateBy" align="center">
      </el-table-column>
      <el-table-column label="更新时间" width="100" prop="updateTime" align="center">
      </el-table-column>


      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
            <!--<el-button
              size="mini"
              @click="handleShowProduct(scope.$index, scope.row)">查看
            </el-button>-->
            <el-button
              size="mini"
              @click="handleUpdateProduct(scope.$index, scope.row)">编辑
            </el-button>

          <el-popconfirm
            title="确定修改吗"
            @onConfirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="danger"
             >修改状态
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->

    <el-dialog title="用户添加" :visible.sync="dialogSaveVisible">
      <el-form :model="dialogUserSave" :rules="rules">

        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="dialogUserSave.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8001/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="radio" label="男">男</el-radio>
          <el-radio v-model="radio" label="女">女</el-radio>
        </el-form-item>

        <el-form-item label="生日" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
              v-model="birthday"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="用户手机号" :label-width="formLabelWidth" prop="userPhoneNumber">
          <el-input v-model="dialogUserSave.userPhoneNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登录密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="dialogUserSave.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="cardId">
          <el-input v-model="dialogUserSave.cardId" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUserSaveFalse">取 消</el-button>
        <el-button type="primary" @click="dialogUserSaveTure()">确 定</el-button>
      </div>
    </el-dialog>



    <!-- 修改 -->

    <el-dialog title="用户修改" :visible.sync="dialogFormVisible">
      <el-form :model="Clone">

        <el-form-item label="用户编号" :label-width="formLabelWidth" >
          <el-input v-model="Clone.userId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="Clone.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8001/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户手机号" :label-width="formLabelWidth" prop="userPhoneNumber">
          <el-input v-model="Clone.userPhoneNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登录密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="Clone.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="cardId">
        <el-input v-model="Clone.cardId" autocomplete="off"></el-input>
      </el-form-item>

        <el-form-item label="身份证国徽面" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8001/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageSide" :src="imageSide" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="身份证头像面" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8001/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess3"
            :before-upload="beforeAvatarUpload">
            <img v-if="imagePositive" :src="imagePositive" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="Clone.gender" label="男">男</el-radio>
          <el-radio v-model="Clone.gender" label="女">女</el-radio>
        </el-form-item>

        <el-form-item label="生日" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
              v-model="Clone.birthday"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="粉钻余额" :label-width="formLabelWidth">
          <el-input v-model="Clone.pinkDiamond" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="注册时间" :label-width="formLabelWidth" >
          <el-date-picker
            v-model="Clone.registerTime"
            type="datetime"
            readonly
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="商家账号" :label-width="formLabelWidth">
          <el-input v-model="Clone.merchantAccount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="Clone.createBy" autocomplete="off" readonly></el-input>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="Clone.createTime"
            type="datetime"
            readonly
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="更新人" :label-width="formLabelWidth">
          <el-input v-model="Clone.updateBy" autocomplete="off" readonly></el-input>
        </el-form-item>

        <el-form-item label="更新时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="Clone.updateTime"
            type="datetime"
            readonly
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogUserUpdate()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>




<script>
  import axios from "axios"
  import moment from 'moment'
  import Cookie from "js-cookie"
  export default {
    data() {
      return{
        radio: '男',
        userList: [],
        dialogFormVisible:false,
        userClone: [],
        formLabelWidth: '120px',
        Clone: [],
        dialogSaveVisible: false,
        dialogUserSave: {},
        imageUrl: '',
        birthday: '',
        rules: {
          userPhoneNumber:[
            { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '手机号格式不正确'}
          ],
          password:[
            { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码格式不正确' }
          ],
          cardId:[
            { pattern: /(^\d{15}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式不正确' }
          ],
        },
        imagePositive: '',
        imageSide: '',
        resuleDate: {},
        input: ''
      }
    },
    created() {
      this.getList();

    },
    methods: {

      /* 商品收藏 */
      userCollection(index,row){
        let ddd = row.userId;
          // this.$router.push({path:'/OuZeChangDaShaBi',query:{item:ddd}})
        this.$router.push({
          path: `/OuZeChangDaShaBi/${ddd}`
        })
      },
      userFootAttention(index,row){
        let ddd = row.userId;
        // this.$router.push({path:'/OuZeChangDaShaBi',query:{item:ddd}})
        this.$router.push({
          path: `/OuZeChangDaErShaBi/${ddd}`
        })
      },

      /* 搜索栏 */
      quzzyQuery(){
        axios.get("http://localhost:8001/user/vague",{
          params: {
            value: this.input
          }
        }).then(data => {
          if (data.data == null || data.data == ""){
              this.$message({
                message: '未查询到有关数据'
              });
              this.getList();
          }else{
            this.userList = data.data;
            for (let userListElement of this.userList) {
              if (userListElement.gender == 1){
                userListElement.gender = '男'
              }else{
                userListElement.gender = '女'
              }

              if (userListElement.userStatus == 1){
                userListElement.userStatus = '启用'
              }else{
                userListElement.userStatus = '禁用'
              }
            }
          }
        });
      },
      getdatatime(){//默认显示今天
        this.birthday= new Date();
      },
      closeAdd() {
        this.dialogSaveVisible = false;
      },
      getList: function () {
        axios.get("http://localhost:8001/user", {
          params: {
            page: 1,
            rows: 10
          }
        }).then(result => {
          this.userList = result.data.records;
          for (let userListElement of this.userList) {
            if (userListElement.gender == 1){
              userListElement.gender = '男'
            }else{
              userListElement.gender = '女'
            }

            if (userListElement.userStatus == 1){
              userListElement.userStatus = '启用'
            }else{
              userListElement.userStatus = '禁用'
            }
          }
        })
      },
      /*删除*/
      handleDelete(index, row){

        let admin = Cookie.get("admin")
        let adminAccount = JSON.parse(admin).adminAccount

        if (row.userStatus == '启用'){
          var data = {
            userId: row.userId,
            userStatus: 0,
            updateBy: adminAccount
          };

          this.$axios({
            method: 'put',
            url: 'http://localhost:8001/user',
            data: data
          }).then(data => {
            if (data){
              this.$message({
                message: '修改完成'
              });
            }else{
              this.$message({
                message: '修改失败'
              });
            }
          });

        }else{
          var data = {
            userId: row.userId,
            userStatus: 1,
            updateBy: adminAccount
          };

          this.$axios({
            method: 'put',
            url: 'http://localhost:8001/user',
            data: data
          }).then(data => {
            if (data){
              this.$message({
                message: '修改完成'
              });
            }else{
              this.$message({
                message: '修改失败'
              });
            }
          });
        }
        this.getList()
      },

      /*编辑*/
      handleUpdateProduct(index,row){
        this.dialogFormVisible = true;
        this.imageUrl=row.userPhoto;
        this.userClone = row;
        this.Clone = row;
        this.Clone = Object.assign({}, row);
      },
      dialogUserUpdate(){

        if (/^[1][3,4,5,7,8][0-9]{9}$/.test(this.Clone.userPhoneNumber)){
          if (/^[0-9a-zA-Z]{6,16}$/.test(this.Clone.password)){
            if (/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(this.Clone.cardId)){
              this.birthday = moment(this.Clone.birthday).format("YYYY-MM-DD");

              if (this.Clone.createTime != null){
                this.Clone.createTime = moment(this.Clone.createTime).format("YYYY-MM-DD HH:mm:ss");
              }

              this.Clone.updateTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");

              if (this.Clone.gender == '男'){
                this.Clone.gender = 1
              }else{
                this.Clone.gender = 2
              }

              if (this.Clone.userStatus == '启用'){
                this.Clone.userStatus = 1
              }else{
                this.Clone.userStatus = 0
              }


              let admin = Cookie.get("admin")
              let adminAccount = JSON.parse(admin).adminAccount
              var data = {
                userId: this.Clone.userId,
                userName: this.Clone.userName,
                userPhoto: this.imageUrl,
                userPhoneNumber: this.Clone.userPhoneNumber,
                password: this.Clone.password,
                cardId: this.Clone.cardId,
                imageSide: this.imageSide,
                imagePositive: this.imagePositive,
                gender: this.Clone.gender,
                birthday: this.birthday,
                pinkDiamond: this.Clone.pinkDiamond,
                userStatus: this.Clone.userStatus,
                registerTime: this.Clone.registerTime,
                merchantAccount: this.Clone.merchantAccount,
                createBy: this.Clone.createBy,
                createTime: this.Clone.createTime,
                updateBy: adminAccount,
                updateTime: this.Clone.updateTime
              };
              axios.get("http://localhost:8001/user/phone",{
                params: {
                  phone: this.Clone.userPhoneNumber
                }
              }).then(result => {
                if (result.data == null || result.data.userPhoneNumber == this.Clone.userPhoneNumber){
                  this.$axios({
                    method: 'put',
                    url: 'http://localhost:8001/user',
                    data: data,
                  }).then((data)=>{
                    if (data){
                      this.$message({
                        message: '修改完成'
                      });
                      this.getList();
                    }else{
                      this.$message({
                        message: '修改失败'
                      });
                    }
                    this.dialogFormVisible = false;
                  });
                }else{
                  this.$message({
                    message: '该手机号已存在'
                  });
                }
              });
            }else{
              this.$message({
                message: '请输入正确的身份证'
              });
            }
          }else{
            this.$message({
              message: '密码格式为6-16位'
            });
          }
        }else{
          this.$message({
            message: '请输入正确的手机号'
          });
        }



      },
      handleAvatarSuccess1(res, file) {

          this.imageUrl = res;
      },
      handleAvatarSuccess2(res, file) {
        this.imageSide = res;
      },
      handleAvatarSuccess3(res, file) {
        this.imagePositive = res;
      },
      /*查看单条*/
      /* handleShowProduct(index,row){
         this.dialogFormVisible = true;
         this.userClone = row;
         this.Clone = row;
         this.Clone = Object.assign({}, row)
         console.log("handleShowProduct",row);
       },*/
      /*添加*/
      handleAddProduct() {
       this.dialogSaveVisible = true;
      },
      dateFormatter(row, column){
        var date = row[column.property];
        if(date == undefined){return ''};
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      dialogUserSaveTure() {

        let admin = Cookie.get("admin")
        let adminAccount = JSON.parse(admin).adminAccount
        if (/^[1][3,4,5,7,8][0-9]{9}$/.test(this.dialogUserSave.userPhoneNumber)){
            if (/^[0-9a-zA-Z]{6,16}$/.test(this.dialogUserSave.password)){
                if (/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(this.dialogUserSave.cardId)){
                  if (this.dialogUserSave.userName == null){
                    this.dialogUserSave.userName = "用户_"+this.dialogUserSave.userPhoneNumber;
                  }
                  this.birthday = moment(this.birthday).format("YYYY-MM-DD")

                  if (this.dialogUserSave.gender == '男'){
                    this.dialogUserSave.gender = 1
                  }else{
                    this.dialogUserSave.gender = 2
                  }


                  var data = {
                    userName: this.dialogUserSave.userName,
                    userPhoto: this.imageUrl,
                    userPhoneNumber: this.dialogUserSave.userPhoneNumber,
                    password: this.dialogUserSave.password,
                    cardId: this.dialogUserSave.cardId,
                    gender: this.radio,
                    birthday: this.birthday,
                    createBy: adminAccount,
                    updateBy: adminAccount,
                    userStatus: 1
                  };

                  axios.get("http://localhost:8001/user/phone",{
                    params: {
                      phone: this.dialogUserSave.userPhoneNumber
                    }
                  }).then(result => {
                    if (result.data === ""){
                      this.$axios({
                        method: 'post',
                        url: 'http://localhost:8001/user',
                        data: data,
                      }).then((data)=>{
                          if (data){
                            this.$message({
                              message: '添加完成'
                            });

                            this.getList();
                          }else{
                            this.$message({
                              message: '添加失败'
                            });
                          }
                          this.dialogSaveVisible = false;
                      });
                    }else{
                      this.$message({
                        message: '该手机号已注册'
                      });
                    }
                  });
              }else{
                  this.$message({
                    message: '请输入正确的身份证'
                  });
              }
            }else{
              this.$message({
                message: '密码格式为6-16位'
              });
            }
        }else{
            this.$message({
              message: '请输入正确的手机号'
            });
        }
      },
      dialogUserSaveFalse() {
        this.dialogSaveVisible = false;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!');
        }
        return isJPG && isLt2M;
      }
    },
    mounted() {
      let that = this;
      that.getdatatime()
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
